<template>
  <view class="address-half-screen">
    <mp-half-screen-dialog extClass="address-half-screen" :show="show" @close="close">
      <view slot="title" class="half-title">
        <text class="title">收货地址列表</text>
      </view>

      <scroll-view slot="desc" scroll-y="true" style="max-height: 66vh" class="desc">
        <radio-group>
          <view v-for="item in addressList" :key="item.id">
            <mp-slideview :buttons="slideButtons" ext-class="cell-flex" @buttontap="del(item)">
              <view class="address-list">
                <view class="info" @click="selectAdd(item)">
                  <label class="radio">
                    <radio
                      v-show="curIndex === item.id"
                      :checked="curIndex === item.id"
                      color="#F34E1C"
                      style="transform: scale(0.8)"
                    />

                    <view class="add-txt">
                      <view class="shipping">
                        <text v-if="item.state" class="badge">默认</text>
                        {{ item.provincesName }} {{ item.cityName }}
                        {{ item.areaName }}
                      </view>
                      <view class="street">{{ item.street }}</view>
                      <view class="name">{{ item.name }} {{ item.machineNumber }}</view>
                    </view>
                  </label>
                </view>
                <view class="icons">
                  <view @click="edit(item)">
                    <image class="icon-img" :src="editIcon"></image>
                  </view>
                  <view @click="del(item)">
                    <image class="icon-img" :src="delIcon"></image>
                  </view>
                </view>
              </view>
            </mp-slideview>
          </view>
        </radio-group>

        <view class="address-add" @click="newAddress">新增收货地址</view>
      </scroll-view>
    </mp-half-screen-dialog>
  </view>
</template>
<script>
import { delReceiverAddress } from '@/api/service';
import editIcon from '@/static/icon/edit.png';
import delIcon from '@/static/icon/del.png';

export default {
  props: {
    show: {
      type: Boolean,
      default: false
    },
    addressList: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      slideButtons: [{ type: 'warn', text: '删除' }],
      curIndex: '',
      editIcon,
      delIcon
    };
  },

  methods: {
    close() {
      this.$emit('close');
    },

    selectAdd(item) {
      this.curIndex = item.id;

      const _info = {
        name: item.name,
        machineNumber: item.machineNumber,
        address: {
          provinceId: item.provincesId,
          provinceName: item.provincesName,
          cityId: item.cityId,
          cityName: item.cityName,
          areaId: item.areaId,
          areaName: item.areaName
        },
        street: item.street,
        state: item.state,
        id: item.id
      };
      this.$store.commit('assess/SET_ADDRESS', _info);

      this.$emit('close');
    },

    edit(item) {
      uni.navigateTo({
        url: '/pages/editAddress/index',
        success: function (res) {
          // 通过eventChannel向被打开页面传送数据
          res.eventChannel.emit('pageData', { data: item, type: 'edit' });
        }
      });
    },

    async del(item) {
      const patientId = uni.getStorageSync('insuredPatientId');
      await delReceiverAddress(patientId, item.id);
      uni.$emit('addressChange');
    },

    newAddress() {
      this.$wxPromise.navigateTo({
        url: '/pages/editAddress/index'
      });
    }
  }
};
</script>

<style lang="scss">
/*
css样式问题: 需要在父组件增加样式:
.address-half-screen {
    background: $uni-bg-color;
    padding: 0 !important;
    .weui-half-screen-dialog__hd__side {
      left: 91vw;
    }
  }
 */

.half-title .title {
  font-size: 36rpx;
}
.cell-flex {
  display: flex;
}
.desc .address-list {
  margin: 24rpx;
  margin-top: 0;
  background: #ffffff;
  border-radius: 16rpx;
  padding: 30rpx 24rpx;
  display: flex;
  .info {
    flex: 1;
  }
  .icons {
    width: 60rpx;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
  }
  .radio {
    display: flex;
    align-items: center;
  }
  .badge {
    background: #f34e1c;
    border-radius: 4px;
    font-size: 24rpx;
    color: #ffffff;
    padding: 2px 4px;
    margin-right: 10rpx;
  }
  .add-txt {
    margin-left: 16rpx;
    margin-right: 16rpx;
    margin-bottom: 0;
  }
  .shipping {
    font-size: 28rpx;
    color: rgba(0, 0, 0, 0.55);
  }
  .street {
    font-size: 36rpx;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.9);
    margin: 24rpx 0;
  }
  .name {
    font-size: 32rpx;
    color: rgba(0, 0, 0, 0.9);
  }
}
.desc .address-add {
  border: 1px solid rgba(0, 0, 0, 0);
  background: linear-gradient(236deg, #fe894d 0%, #ef3931 100%);
  opacity: 1;
  border-radius: 44rpx;
  height: 88rpx;
  margin: 0 24rpx;
  text-align: center;
  line-height: 88rpx;
  font-size: 36rpx;
  color: #ffffff;
}
.icon-img {
  width: 48rpx;
  height: 48rpx;
}
</style>
